<template>
  <div class="jst_main">
    <div class="jst_head">
      <div class="jst-filter">
        <div style="line-height: 24px;">
          <div class="show-title">Hi {{ currnetUserName }}</div>
          <div :style="isHidden ? '' : 'display: none;'" class="show-des">
            Welcome back to hightrast backend management
          </div>
        </div>
        <div style="display: flex;">
          <div class="filter-btns">
            <div
              class="btn-item"
              :class="btnIndex == b ? 'btn-active' : 'btn-unactive'"
              v-for="(btn, b) in btns"
              :key="b"
              @click="btnClick(btn, b)"
            >
              {{ btn.name }}
            </div>
          </div>
          <div class="daterange">
            <el-date-picker
              v-model="dateTime"
              type="daterange"
              size="small"
              range-separator="-"
              start-placeholder="Start time"
              end-placeholder="End time"
              @change="changeDate"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
          <!-- <div class="search">
            <el-input
              placeholder="Search..."
              size="small"
              prefix-icon="el-icon-search"
              v-model="queryVals.vendor"
              @keyup.native.enter="getPageInfo()"
            >
            </el-input>
          </div> -->
        </div>
      </div>
      <div class="jst_content">
        <div class="add-filter">
          <el-button
            @click="openFilter(null)"
            type="primary"
            icon="el-icon-plus"
            class="Add"
            >Add Filter</el-button
          >
          <div class="filter-tags">
            <el-tag
              type="warning"
              closable
              style="margin-left: 12px;"
              @close="closeTag(item)"
              @click="openFilter(item)"
              v-for="(item, index) in filterVals"
              :key="item.label"
              ><span :title="item.label + ':' + item.labelValue"
                >{{ item.label }}:{{ item.labelValue }}</span
              ></el-tag
            >
          </div>
        </div>

        <el-table
          ref="tableRef"
          class="table-detail"
          stripe
          :height="pageHeight"
          :header-cell-style="{
            background: '#FFFDF4',
            color: '#26497e',
            'font-szie': '12px'
          }"
          :data="pageTicket"
          :show-summary="true"
          :summary-method="summaryMethod"
          @row-dblclick="rowDbClick"
          @sort-change="sortChange"
          style="width: 100%"
        >
          <el-table-column
            prop="itemNumber"
            label="Item Number"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
            min-width="160"
          />
          <el-table-column
            prop="userName"
            label="Designer"
            min-width="120"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
          />

          <el-table-column
            prop="image"
            label="Image"
            min-width="120"
            align="center"
            header-align="center"
          >
            <template slot-scope="scope">
              <!-- <img :src="scope.row.image" :min-width="70" /> -->
              <el-image
                style="width: 70px; height: 70px;border-radius: 15px;"
                :src="scope.row.image"
                fit="cover"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="variantsTitle"
            label="Variant"
            min-width="160"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="productType"
            label="Product Type"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
            min-width="160"
          />

          <el-table-column
            prop="createdAt"
            label="Launch Time"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
            min-width="160"
          >
            <template slot-scope="scope">
              <span>{{ dayjs(scope.row.createdAt).format("DD/MM/YYYY") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="totalSalesQuantity"
            label="Sales Quantity"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
            min-width="160"
          />
          <el-table-column
            prop="commissonRate"
            label="Current Commisson Rate"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
            min-width="240"
          >
            <template slot-scope="scope">
              <div class="row-input">
                <div
                  class="role-input"
                  v-if="'commissonRate' + scope.$index == editFocus"
                >
                  <el-input
                    :id="'commissonRate' + scope.$index"
                    style="width: 180px;"
                    class="editNum"
                    v-model="scope.row.commissonRate"
                    :min="1"
                    :max="100"
                    type="number"
                    :controls="false"
                    @input="
                      commissionRateHandleInput(scope.row, 'commissonRate')
                    "
                    @blur="blurInput(scope.row, 'commissonRate')"
                  ></el-input>
                </div>
                <span v-else>{{ scope.row.commissonRate }}%</span>
                <i
                  class="el-icon-edit row-icon"
                  @click="editRow(scope.row, scope.$index, 'commissonRate')"
                  v-if="userRoleInfo.roleType === 1"
                ></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="Current Price"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
            min-width="240"
          >
            <template slot-scope="scope">
              <!-- <div class="row-input">
                <div
                  class="role-input"
                  v-if="'price' + scope.$index == editFocus"
                >
                  <el-input
                    :id="'price' + scope.$index"
                    style="width: 180px;"
                    class="editNum"
                    v-model="scope.row.price"
                    type="number"
                    :controls="false"
                    @blur="blurInput(scope.row, 'price')"
                    @input="commissionRateHandleInput(scope.row, 'price')"
                  ></el-input>
                </div>
                <span v-else>US${{ scope.row.price }}</span>
                <i
                  class="el-icon-edit row-icon"
                  @click="editRow(scope.row, scope.$index, 'price')"
                  v-if="userRoleInfo.roleType === 1"
                ></i>
              </div> -->
              <span>US${{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="sampleCost"
            label="Sample Cost"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
            min-width="240"
          >
            <template slot-scope="scope">
              <div class="row-input">
                <div
                  class="role-input"
                  v-if="'sampleCost' + scope.$index == editFocus"
                >
                  <el-input
                    :id="'sampleCost' + scope.$index"
                    style="width: 180px;"
                    class="editNum"
                    v-model="scope.row.sampleCost"
                    type="number"
                    :controls="false"
                    @blur="blurInput(scope.row, 'sampleCost')"
                    @input="commissionRateHandleInput(scope.row, 'sampleCost')"
                  ></el-input>
                </div>
                <span v-else>US${{ scope.row.sampleCost }}</span>
                <i
                  class="el-icon-edit row-icon"
                  @click="editRow(scope.row, scope.$index, 'sampleCost')"
                  v-if="userRoleInfo.roleType === 1"
                ></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="totalCommisson"
            label="Total Commisson"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
            min-width="160"
          >
            <template slot-scope="scope">
              <span>US${{ scope.row.totalCommisson }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="priceOnApplication" label="Price On Application" min-width="8%" align="center"
            header-align="center" /> -->
          <!-- <el-table-column prop="name" label="项目名称" min-width="64%" align="left" header-align="left">
            <template slot-scope="scope">
              <i class="el-icon-folder-opened"></i>
              <span>
                {{ scope.row.name }}
              </span>
            </template>
          </el-table-column> -->

          <!-- <el-table-column prop="listorder" label="开发成员" min-width="8%" align="center" header-align="center">
          </el-table-column> -->
          <!-- <el-table-column label="option" fixed="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="warning"
                @click="handleSave(scope.$index, scope.row)"
                >save</el-button
              >
            </template>
          </el-table-column> -->
        </el-table>

        <!--分页-->
        <el-row>
          <el-col style="text-align:right;margin-top: 20px">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryVals.page"
              :page-sizes="[5, 10, 50, 100]"
              :page-size="queryVals.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </el-col>
        </el-row>

        <el-dialog
          title="Add Filter"
          :visible.sync="dialogFormVisible"
          width="45%"
          style="margin: 0 auto;"
        >
          <div style="height: 50vh" class="dialog-content">
            <div class="left-list">
              <div
                v-for="(item, index) in filters"
                :key="index"
                class="filter-item"
                :class="filterIndex == index ? 'filter-active' : ''"
                @click="filter(item, index)"
              >
                {{ item.label }}
              </div>
            </div>
            <div class="right-info">
              <div
                v-if="
                  filterVal == 'Designer' ||
                    filterVal == 'Item Number' ||
                    filterVal == 'Product Type'
                "
              >
                <div class="filter-search" v-if="filterVal == 'Item Number'">
                  <el-input
                    placeholder="Input..."
                    size="small"
                    prefix-icon="el-icon-search"
                    v-model="searchVal"
                    @input="inputVal"
                  >
                  </el-input>
                </div>
                <div class="designer-list" v-if="filterVal == 'Product Type'">
                  <div class="filter-search">
                    <el-input
                      placeholder="Search..."
                      size="small"
                      prefix-icon="el-icon-search"
                      v-model="productVal"
                      @input="inputVal"
                    >
                    </el-input>
                  </div>
                  <div
                    v-for="(item, index) in productTypeList"
                    :key="index"
                    class="designer-item"
                    @click="designer(item, index)"
                    :class="
                      filters[filterIndex].value == item
                        ? 'designer-active'
                        : ''
                    "
                  >
                    {{ item }}
                  </div>
                </div>
                <div class="designer-list" v-if="filterVal == 'Designer'">
                  <div class="filter-search">
                    <el-input
                      placeholder="Search..."
                      size="small"
                      prefix-icon="el-icon-search"
                      v-model="userVal"
                      @input="inputVal"
                    >
                    </el-input>
                  </div>
                  <div
                    v-for="(item, index) in userList"
                    :key="index"
                    class="designer-item"
                    @click="designer(item, index)"
                    :class="
                      filters[filterIndex].value == item.id
                        ? 'designer-active'
                        : ''
                    "
                  >
                    {{ item.userName }}
                  </div>
                </div>
              </div>
              <div v-else>
                <el-input
                  style="width: 130px;"
                  placeholder="Minimum value"
                  size="small"
                  v-model="minVal"
                  @input="inputMin"
                ></el-input>
                <span v-if="filterVal == 'Current Commisson Rate'">%</span>
                <span style="margin: 0 8px;">-</span>
                <el-input
                  style="width: 130px;"
                  placeholder="Maximum value"
                  size="small"
                  v-model="maxVal"
                  @input="inputMax"
                ></el-input>
                <span v-if="filterVal == 'Current Commisson Rate'">%</span>
              </div>
            </div>
          </div>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">Cancel</el-button>
            <el-button type="warning" @click="confirm">Confirm</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { getUserInfo, queryUserList } from "../../api/userService";
import {
  queryProducts,
  updateProducts,
  queryProductType
} from "../../api/productService";
import dayjs from "dayjs";
import { Row } from "element-ui";
import Decimal from "decimal.js";
export default {
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      pageHeight: 0,
      total: 0, //总数据条数
      filterIndex: 0,
      btnIndex: -1,
      editFocus: "",
      word: "",
      maxVal: "",
      minVal: "",
      filterVal: "Designer",
      searchVal: "",
      userVal: "",
      productVal: "", //筛选弹框右侧product type搜索输入
      dateTime: [],
      ticket: [], //这里是从后端获取的所有数据
      pageTicket: [], //分页后的当前页数据
      btns: [
        { name: "LAST 7 DAYS", value: "1" },
        { name: "LAST MONTH", value: "2" },
        { name: "TODAY", value: "3" }
      ],
      filters: [
        {
          label: "Item Number", //展示名
          value: "", // 选中数据、输入模糊数据
          maxVal: "", // 输入最大值
          minVal: "", // 输入最小值
          startProp: "sku", // 查询参数名开始字段名，也包括输入和选中字段名
          endProp: "", // 输入结束字段名
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Product Type",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "productType",
          endProp: "",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        // { label: "Item Number", value: '',maxVal: "",minVal: "",startProp:"",endProp:""},
        {
          label: "Sales Quantity",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "startTotalSalesQuantity",
          endProp: "endTotalSalesQuantity",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Current Commisson Rate",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "startCommissonRate",
          endProp: "endCommissonRate",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Current price",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "startPrice",
          endProp: "endPrice",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Sample Cost",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "startSampleCost",
          endProp: "endSampleCost",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Total Commisson",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "startTotalCommisson",
          endProp: "endTotalCommisson",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        }
        // { label: "Payback Progress", value: '',maxVal: "",minVal: "",startProp:"",endProp:""},
        // { label: "Price On Application", value: '',maxVal: "",minVal: "",startProp:"",endProp:""}
      ],
      filterVals: [],
      userList: [],
      tempUserList: [],
      productTypeList: [], // 商品类型列表数据
      tempProductTypeList: [], // 筛选的商品类型列表数据
      Visiable: false,
      form: {
        name: "",
        region: ""
      },
      userRoleInfo: {},
      queryVals: {
        asc: true,
        endCommissonRate: null,
        endPrice: null,
        endSampleCost: null,
        endTime: "",
        endTotalSalesQuantity: null,
        orderField: "",
        page: 1,
        pageSize: 10,
        productType: "",
        selectUserId: null,
        startCommissonRate: null,
        startPrice: null,
        startSampleCost: null,
        startTime: "",
        startTotalSalesQuantity: null,
        userId: null,
        vendor: "",
        sku: ""
      },
      dayjs: dayjs,
      tempRow: {},
      currnetUserName: "",
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight,
      isHidden: true
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.updatePageHeight();
    });
    // 监听窗口大小变化事件
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    // 组件销毁前，移除窗口大小变化事件的监听，避免内存泄漏
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize() {
      // 更新窗口宽度和高度的状态
      this.windowWidth = window.innerWidth;
      this.windowHeight = window.innerHeight;
      // 可以在这里添加根据宽高判断的逻辑
      if (this.windowWidth < 768) {
        console.log("当前是手机端屏幕");
        this.isHidden = false;
      } else {
        console.log("当前是桌面端屏幕");
        this.isHidden = true;
      }
      this.updatePageHeight();
    },
    editRow(row, index, mode) {
      this.tempRow = JSON.parse(JSON.stringify(row));
      let nameRef = mode + index;
      this.editFocus = nameRef;
      this.$nextTick(() => {
        // this.$refs[nameRef].focus();
        document.getElementById(nameRef).focus();
      });
    },
    commissionRateHandleInput(row, field) {
      if (field === "commissonRate") {
        // 如果数值以0开头，则将其删除
        row[field] = row[field].replace(/^0+/, "");
        if (row[field] < 0) {
          // 若输入小于 0，将其置为 0
          row[field] = 0;
        } else if (field === "commissonRate" && row[field] > 100) {
          // 若输入大于 100，将其置为 100
          row[field] = 100;
        }
      } else if (field === "price") {
        if (row[field] < 0) {
          // 若输入小于 0，将其置为 0
          row[field] = 0;
        }
      } else if (field === "sampleCost") {
        if (row[field] < 0) {
          // 若输入小于 0，将其置为 0
          row[field] = 0;
        }
      }
    },
    blurInput(row, filedName) {
      this.$confirm(
        filedName === "commissonRate"
          ? this.$t("home.commissonRateTip")
          : this.$t("home.sampleRateTip"),
        "",
        {
          confirmButtonText: "Change",
          cancelButtonText: "Cancel",
          type: "error",
          center: true,
          roundButton: true,
          cancelButtonClass: "cancel-button-class",
          confirmButtonClass: "confirm-button-class"
        }
      )
        .then(async () => {
          let params = {
            productId: row.productId,
            variableId: row.id
          };
          if (filedName === "commissonRate") {
            params.commissonRate =
              row.commissonRate === "" || row.commissonRate === null
                ? 0
                : row.commissonRate;
          } else if (filedName === "price") {
            params.price =
              row.price === "" || row.price === null ? 0 : row.price;
          } else if (filedName === "sampleCost") {
            params.sampleCost =
              row.sampleCost === "" || row.sampleCost === null
                ? 0
                : row.sampleCost;
          }
          await updateProducts(params).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t("home.operationSuccess"));
            } else {
              this.$message.error(res.msg);
            }
          });
          this.editFocus = "";
          this.getPageInfo();
        })
        .catch(() => {
          row.commissonRate = this.tempRow.commissonRate;
          row.price = this.tempRow.price;
          row.sampleCost = this.tempRow.sampleCost;
          this.editFocus = "";
        });
    },
    designer(item) {
      switch (this.filterVal) {
        case "Designer":
          this.filters[this.filterIndex].value = item.id;
          this.filters[this.filterIndex].selectName = item.userName;
          break;
        case "Product Type":
          this.filters[this.filterIndex].value = item;
          this.filters[this.filterIndex].selectName = item;
          break;
        default:
          break;
      }
    },
    closeTag(item) {
      this.filterVals = this.filterVals.filter(c => {
        if (c.label == item.label) {
          this.queryVals[c.startProp] = null;
          this.queryVals[c.endProp] = null;
        }
        return c.label != item.label;
      });
      this.queryVals.page = 1;
      this.getPageInfo();
    },
    inputMin(val) {
      this.filters[this.filterIndex].minVal = val;
    },
    inputMax(val) {
      this.filters[this.filterIndex].maxVal = val;
    },
    inputVal(val) {
      switch (this.filterVal) {
        case "Designer":
          if (val) {
            this.userList = this.tempUserList.filter(array =>
              array.userName.match(val)
            );
          } else {
            this.userList = this.tempUserList;
          }
          break;
        case "Product Type":
          if (val) {
            this.productTypeList = this.tempProductTypeList.filter(array =>
              array.match(val)
            );
          } else {
            this.productTypeList = this.tempProductTypeList;
          }
          break;
        case "Item Number":
          this.filters[this.filterIndex].value = val;
        default:
          break;
      }
    },
    confirm() {
      console.log(this.searchVal);
      this.dialogFormVisible = false;
      this.filterVals = this.filters.filter(c => {
        if (c.maxVal) {
          this.queryVals[c.startProp] = c.minVal;
          this.queryVals[c.endProp] = c.maxVal;
          c.labelValue = c.minVal + "-" + c.maxVal;
        }
        if (c.value) {
          if (c.label === "Product Type" || c.label === "Designer") {
            if (c.label === "Product Type") {
              c.labelValue = c.selectName ? c.selectName : this.productVal;
            } else {
              c.labelValue = c.selectName ? c.selectName : this.userVal;
            }
          } else {
            c.labelValue = c.value;
          }
          this.queryVals[c.startProp] = c.value;
        }
        return c.value || c.maxVal;
      });
      this.queryVals.page = 1;
      this.getPageInfo();
      // this.clearFilter();
    },
    filter(item, index) {
      this.filterIndex = index;
      this.filterVal = item.label;
      this.maxVal = this.filters[this.filterIndex].maxVal;
      this.minVal = this.filters[this.filterIndex].minVal;
      if (item.label != "Designer")
        this.searchVal = this.filters[this.filterIndex].value;
    },
    clearFilter() {
      this.filters.forEach(item => {
        this.maxVal = "";
        this.minVal = "";
        this.searchVal = "";
        this.userVal = "";
      });
    },
    openFilter(flItem) {
      if (flItem) {
        this.filterIndex = flItem.labelIndex;
        this.filterVal = flItem.label;
      }
      this.filters.forEach((item, index) => {
        let val = this.filterVals.find(c => c.label == item.label);
        if (val) {
          item = val;
        } else {
          item.maxVal = "";
          item.minVal = "";
          item.value = "";
        }
      });
      this.maxVal = this.filters[this.filterIndex].maxVal;
      this.minVal = this.filters[this.filterIndex].minVal;
      this.searchVal = this.filters[this.filterIndex].value;
      // 这一句一定要在最后

      this.$nextTick(() => {
        this.dialogFormVisible = true;
      });
    },
    btnClick(item, index) {
      if (this.btnIndex == index) this.btnIndex = -1;
      else this.btnIndex = index;
      if (item.value == "1") {
        // 7天
        this.queryVals.startTime = dayjs()
          .subtract(7, "day")
          .format("YYYY-MM-DD");
        this.queryVals.endTime = dayjs().format("YYYY-MM-DD");
      } else if (item.value == "2") {
        // month
        this.queryVals.startTime = dayjs()
          .date(1)
          .format("YYYY-MM-DD");
        this.queryVals.endTime = dayjs().format("YYYY-MM-DD");
      } else {
        // 今天
        this.queryVals.startTime = dayjs().format("YYYY-MM-DD");
        this.queryVals.endTime = dayjs().format("YYYY-MM-DD");
      }
      if (this.btnIndex == -1) {
        this.queryVals.startTime = "";
        this.queryVals.endTime = "";
      }
      this.dateTime = [];
      this.queryVals.page = 1;
      this.getPageInfo();
    },
    changeEdit(row) {
      this.pageTicket.forEach((item, index) => {
        if (item.id == row.id) item.isEdit = false;
        else item.isEdit = true;
      });
      this.$refs.tableRef.doLayout();
    },
    changeDate(date) {
      this.btnIndex = -1;
      this.queryVals.page = 1;
      if (date) {
        this.queryVals.startTime = date[0];
        this.queryVals.endTime = date[1];
        this.getPageInfo();
      } else {
        this.queryVals.startTime = "";
        this.queryVals.endTime = "";
        this.getPageInfo();
      }
    },
    async handleSave(index, row) {
      let params = {
        commissonRate: row.commissonRate,
        price: row.price,
        productId: row.productId,
        variableId: row.id,
        sampleCost: row.sampleCost
      };
      let res = await updateProducts(params);
      if (res.code === 200) {
        this.$message.success("保存成功");
        this.getPageInfo();
      } else {
        this.$message.error(res.msg);
      }
    },
    sortChange(column, prop, order) {
      console.log(column, prop, order);
      if (column.order == null) {
        this.queryVals.asc = null;
      } else if (column.order === "ascending") {
        this.queryVals.asc = true;
      } else if (column.order === "descending") {
        this.queryVals.asc = false;
      }
      this.queryVals.page = 1;
      this.queryVals.orderField = column.prop;
      this.getPageInfo();
    },
    updatePageHeight() {
      // const pageHeight = window.innerHeight;
      this.pageHeight = this.windowHeight - 240;
    },
    AddSubclass(index, row) {
      console.log(index, row);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    renderHeader(h, { column, $index }) {
      if (column.order === "ascending") {
        return (
          <div>
            <span>{column.label}</span>
            <i class="el-icon-sort-up"></i>
          </div>
        );
      } else if (column.order === "descending") {
        return (
          <div>
            <span>{column.label}</span>
            <i class="el-icon-sort-down"></i>
          </div>
        );
      } else {
        return (
          <div>
            <span>{column.label}</span>
            <i class="el-icon-sort"></i>
          </div>
        );
      }
    },
    // 获取当前页的数据信息
    async getPageInfo() {
      const res = await queryProducts(this.queryVals);
      if (res.code === 200) {
        this.pageTicket = res.data.records;

        this.total = res.data.total;
        // this.$message.success(this.$t("home.operationSuccess"));
      }
      this.$nextTick(() => {
        this.$refs.tableRef.doLayout();
      });
    },
    //分页时修改每页的行数,这里会自动传入一个size
    handleSizeChange(size) {
      //修改当前每页的数据行数
      this.queryVals.pageSize = size;
      //数据重新分页
      this.getPageInfo();
    },
    //调整当前的页码
    handleCurrentChange(pageNumber) {
      //修改当前的页码
      this.queryVals.page = pageNumber;
      //数据重新分页
      this.getPageInfo();
    },

    summaryMethod({ columns, data }) {
      const sums = [];
      const summaryColumns = [
        "totalSalesQuantity",
        "sampleCost",
        "totalCommisson"
      ];
      columns.forEach((column, index) => {
        if (summaryColumns.includes(column.property)) {
          let total = new Decimal(0);
          data.forEach(row => {
            total = total.add(new Decimal(row[column.property] || 0));
          });
          sums.push(Number(total.toFixed(2)));
        } else {
          sums.push("");
        }
      });
      return sums;

      // const sums = [];
      // columns.forEach((column, index) => {
      //   if (
      //     column.property === "totalSalesQuantity" ||
      //     column.property === "sampleCost" ||
      //     column.property === "totalCommisson"
      //   ) {
      //     let total = 0;
      //     if (column.property === "totalSalesQuantity")
      //       total = data.reduce(
      //         (sum, row) => sum + Number(row.totalSalesQuantity),
      //         0
      //       );
      //     else if (column.property === "sampleCost")
      //       total = data.reduce((sum, row) => sum + Number(row.sampleCost), 0);
      //     else if (column.property === "totalCommisson")
      //       total = data.reduce(
      //         (sum, row) => sum + Number(row.totalCommisson),
      //         0
      //       );
      //     sums.push(total); // Calculate total for salesQuantity
      //   } else {
      //     sums.push("");
      //   }
      // });
      // return sums;
    },
    rowDbClick(row, event, column) {
      this.$router.push({
        name: "salesDataDetail",
        query: {
          productId: row.productId,
          variableId: row.id,
          pruoductTitle: row.title,
          puductImage: row.image,
          puductPrice: row.price
        }
      });
    },
    async getUserInfoByToken() {
      const res = await getUserInfo();
      if (res.code === 200) {
        this.userRoleInfo = res.data.userRole;
        this.currnetUserName = res.data.userName;
        if (
          this.userRoleInfo.roleType != null &&
          this.userRoleInfo.roleType === 1
        ) {
          // 管理者权限才能筛选用户
          this.initUser();
          this.filters.unshift({
            label: "Designer",
            value: "",
            maxVal: "",
            minVal: "",
            startProp: "selectUserId",
            endProp: "",
            labelValue: "",
            labelIndex: "",
            selectName: ""
          });
        }
      } else {
        this.$message.error(res.msg);
      }
      this.filters.forEach((item, index) => {
        item.labelIndex = index;
      });
    },
    async initUser() {
      const res = await queryUserList({ page: 1, pageSize: -1 });
      if (res.code === 200) {
        this.userList = res.data.records;
        this.tempUserList = JSON.parse(JSON.stringify(this.userList));
      } else {
        this.$message.error(res.msg);
      }
    },
    async queryProductType() {
      const res = await queryProductType();
      if (res.code === 200) {
        this.productTypeList = res.data;
        this.tempProductTypeList = JSON.parse(
          JSON.stringify(this.productTypeList)
        );
      } else {
        this.$message.error(res.msg);
      }
    }
  },
  created() {
    this.getUserInfoByToken();
    this.getPageInfo();
    // this.initUser();
    this.queryProductType();
  }
};
</script>
<style scoped>
.jst_main {
  /* height: 100%; */
  background: #fffdf4;
  padding: 15px;

  display: flex;
  flex-direction: column;
  height: 100vh;
}

.jst_content {
  flex: 1;
  overflow-y: auto;
}
.jst_head {
  width: 100%;
  /* height: 100%; */
  background: #fffdf4;
}
.jst-filter {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* 超出部分隐藏 */
  overflow-y: hidden;
  overflow-x: auto;
}
.jst-filter::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.add-filter {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 0 10px 10px;
}
.filter-tags {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.show-title {
  font-size: 26px;
  color: #333333;
  font-style: italic;
}
.show-des {
  font-size: 13px;
  color: #727272;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 1; /* 允许子项缩小 */
  word-wrap: break-word; /* 让长单词或 URL 自动换行 */
}
.daterange .el-date-editor {
  width: 240px;
  height: 34px;
  border-radius: 10px;
  box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.2);
}
.search {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.search .el-input {
  margin: 5px 0 0 20px;
  overflow: hidden;
  border-radius: 10px;
  height: 34px;
  line-height: 34px;
  box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.2);
}
/deep/ .el-dialog {
  border-radius: 20px;
}
/deep/ .search .el-input__inner {
  border: none;
}
.filter-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 6px;
  margin-right: 30px;
  /* flex-wrap: wrap; */
}
.filter-btns .btn-item {
  color: #666;
  font-size: 13px;
  margin: 0 10px;
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.2);

  white-space: nowrap;
  /* overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1; */
}
.filter-btns .btn-active {
  background: #ffba88;
}
.row-icon {
  color: #ffba88;
  cursor: pointer;
  margin-left: 6px;
  font-size: 18px;
}
.jst_content {
  width: 100%;
  /* height: 100%; */
  background: #fffdf4;
}
.row-input {
  display: flex;
  justify-content: center;
  align-items: center;
}
.jst_content .Add {
  color: #666666;
  background: #ffba88;
  border: 1px solid #ffba88;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.designer-active {
  background-color: #ffba88;
  border-radius: 4px;
}
.dialog-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.dialog-content .filter-item {
  cursor: pointer;
  border-radius: 8px;
  padding: 0 10px;
}
.dialog-content .filter-active {
  background: #ffba88;
}
.dialog-content .left-list {
  width: 200px;
  height: 50vh;
  border-right: 1px solid #f1f1f1;
  padding-right: 15px;
}
.role-input {
  display: flex;
  justify-content: center;
  align-items: center;
}
.role-input span {
  margin-left: 8px;
  cursor: pointer;
}
.role-input span i {
  color: #ffba88;
  font-size: 18px;
}
.dialog-content .right-info {
  width: 340px;
  margin-left: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.designer-list {
  height: calc(50vh - 50px);
  overflow-y: auto;
  /* width: 320px;
  padding-right: 10px; */
}
.dialog-content .right-info .designer-item {
  cursor: pointer;
  padding-left: 13px;
}
.editNum {
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
}
/deep/ .dialog-content .right-info .el-input__inner {
  border: none;
  background: #ffba88;
}
/deep/ .dialog-content .right-info .filter-search .el-input__inner {
  background-color: transparent !important;
}
/deep/ .dialog-content .right-info .el-input__inner::placeholder {
  color: #333333;
}
/deep/
  .dialog-content
  .right-info
  .filter-search
  .el-input__inner::placeholder {
  color: #999999;
}
.el-tag.el-tag--warning {
  background: #ffba88;
  height: 32px;
  /* 设置标签最大宽度，可根据实际情况调整 */
  max-width: 150px;

  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: none;
  color: #666666;
  cursor: pointer; /* 将鼠标指针样式设置为小手 */
}
.el-tag.el-tag--warning span {
  /* 不换行 */
  white-space: nowrap;
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 超出部分显示省略号 */
  text-overflow: ellipsis;
  cursor: pointer; /* 将鼠标指针样式设置为小手 */
  /* 动态绑定 title 属性 */
  :title="item.label + ':' + item.labelvalue" ;
}
/* 使用 Vue 的深度选择器，确保样式可以穿透到组件内部 */
.el-tag.el-tag--warning span:hover::after {
  content: attr(title); /* 显示 title 属性的内容 */
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 20px;
  z-index: 1;
  white-space: normal; /* 允许换行 */
  word-wrap: break-word; /* 允许单词内换行 */
}

/* 为 span 元素添加 title 属性，显示完整的文本内容 */
.el-tag.el-tag--warning span {
  title: attr(
    data-original-text
  ); /* 使用 data-original-text 属性作为 title 属性的值 */
}

/* 使用 Vue 的深度选择器，确保样式可以穿透到组件内部 */
.el-tag.el-tag--warning span {
  position: relative; /* 确保子元素的定位是相对于 span 元素的 */
}
/deep/ .el-tag.el-tag--warning .el-tag__close {
  margin-top: 4px;
  color: #666666 !important;
}
/deep/ .caret-wrapper {
  display: none !important;
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #fffdf4;
}
.el-table {
  padding-bottom: 5px;
}
.el-table,
.el-table__expanded-cell {
  background-color: #fff;
}

/deep/ .el-table__header-wrapper .cell {
  font-size: 12px !important;
}
/* 非斑马纹颜色 */
/deep/ .el-table tr {
  background: #fff;
}

/* 表格的边框设置没有边框 */
/deep/ .el-table td,
.building-top .el-table th.is-leaf {
  border: none;
  /* color: white; */
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #fffdf4;
}

/* 鼠标滑过表格某一行时的颜色 */
/* /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #fffdf4;
} */

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ffcc7e;
  color: #000;
}

/deep/ .el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  margin: 0 5px;
  background-color: #fff;
  color: #000;
  min-width: 30px;
  border-radius: 4px;
  border: 1px solid #b2b8c2;
}
/deep/ .el-table__footer-wrapper tbody td.el-table__cell {
  background-color: #ffffff;
  margin-bottom: 5px;
}
/* 汇总行样式 */
/deep/ .el-table__footer {
  background: #fff;
}

/* 给汇总行的某些中间单元格加边框，例如3和4列 */
/deep/ .el-table__footer td:nth-child(7) .cell {
  background: #ffe298 !important;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  margin: 0 10px;
}
/deep/ .el-table__footer td:nth-child(10) .cell {
  background: #ffe298 !important;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  margin: 0 10px;
}
/deep/ .el-table__footer td:nth-child(11) .cell {
  background: #ffe298 !important;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  margin: 0 10px;
}
/deep/ .el-table__footer td {
  background: #ffffff !important;
  border: none !important;
}
/deep/ .el-table__fixed-right::before {
  display: none;
}
/* 修改部分：添加媒体查询，适配手机端表格 */
@media (max-width: 768px) {
  .el-table__header-wrapper th {
    font-size: 10px;
  }
  .el-table__body-wrapper td {
    font-size: 10px;
  }
}
</style>
<style>
html {
  overflow: hidden;
}
</style>
